// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

$headerHeight: 48px;
$svgSize: 16px;
$imgSize: 30px;

.app-header {
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;

  @include rem-fallback(height, $headerHeight);

  .breadcrumbs {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    align-items: center;
    padding-left: 20px;
    @include rem-font-size(14px);

    .chevron-icon {
      margin-left: 10px;
      margin-right: 10px;

      svg { @include square-px-rem(14px); }
    }

    .crumb {
      text-transform: capitalize;
      text-decoration: none;
    }

    a.crumb:hover { text-decoration: underline; }
  }

  .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @include rem-fallback(line-height, $headerHeight);
    @include rem-fallback(padding-left, 24px);
    @include rem-fallback(padding-right, 24px);
  }

  .items-container {
    display: flex;
    align-items: center;
    position: relative;

    button {
      border: 0;
      padding: 0;
      background-color: transparent;
    }

    .item-icon {
      cursor: pointer;

      @include square-px-rem($headerHeight);

      svg { @include square-px-rem($svgSize); }

      &.profile {
        display: flex;
        justify-content: center;
        align-items: center;

        img { @include square-px-rem($imgSize); }
      }
    }

    .menu-container {
      position: relative;

      .menu {
        display: flex;
        flex-flow: column wrap;
        position: absolute;
        z-index: 2000; // Push above the main content container TODO: Remove with better dropdown
        right: 0;
        top: 100%;
        border: 1px solid;
        @include rem-fallback(width, 180px);

        > .menu-item {
          display: block;
          text-align: left;
          cursor: pointer;
          text-decoration: none;
          @include rem-font-size(14px);
          @include rem-fallback(padding, 10px);
        }
      }
    }
  }

  // Apply theme properties
  @include themify($themes) {
    background-color: themed('colorHeaderBg');
    border-bottom: 1px solid themed('colorHeaderBorderColor');

    .breadcrumbs {
      .chevron-icon svg { fill: themed('colorHeaderText'); }
      .crumb { color: themed('colorHeaderText'); }
    }

    .label { color: themed('colorHeaderText'); }

    .items-container {
      border-left: 1px solid themed('colorHeaderItemContainerBorderColor');

      .item-icon {
        svg { fill: themed('colorHeaderText'); }

        &:hover {
          background-color: themed('colorHeaderItemBgHover');

          svg { fill: themed('colorHeaderIconHover'); }
        }
      }

      .menu {
        background-color: themed('colorHeaderDropdown');
        border-color: themed('colorSystem');

        > .menu-item {
          color: themed('colorHeaderText');

          &:hover { background-color: themed('colorHeaderItemBgHover'); }
        }
      }
    }
  }
}
